<template>
  <div class="map-picker">
    <div id="mapContainer" class="map"></div>
    <!-- <div class="info">
      <p>纬度: {{ latitude }}</p>
      <p>经度: {{ longitude }}</p>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const latitude = ref("");
const longitude = ref("");

let map = null;
let marker = null;

onMounted(() => {
  initMap();
});

const initMap = () => {
  map = new window.AMap.Map("mapContainer", {
    zoom: 10,
    center: [116.397428, 39.90923], // 初始中心点坐标
  });

  map.on("click", (e) => {
    if (marker) {
      marker.setPosition(e.lnglat);
    } else {
      marker = new window.AMap.Marker({
        position: e.lnglat,
        map: map,
      });
    }
    latitude.value = e.lnglat.lat;
    longitude.value = e.lnglat.lng;
  });
};

defineExpose({
  getCoordinates: () => ({ latitude: latitude.value, longitude: longitude.value }),
});
</script>

<style scoped>
.map-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map {
  width: 670px;
  height: 400px;
  margin-bottom: 10px;
}

.info {
  text-align: center;
}
</style>
